import 'package:flutter/material.dart';
import '/utils/load_image.dart';
import '/components/image_preview.dart';

// 朋友圈的图文消息样式
class ImageTextMsg extends StatelessWidget {
  final String userName;
  final String avatarUrl;
  final String messageTxt;
  final List<String>? imgPaths;
  final String? city;
  final String time;
  const ImageTextMsg({
    super.key,
    required this.userName,
    required this.avatarUrl,
    required this.messageTxt,
    this.imgPaths,
    this.city,
    required this.time,
  });

  @override
  Widget build(BuildContext context) {

    double avatarSize = 40.0; // 头像大小
    double imgSpacing = 4.0; // 图片之间的间距
    double imgSize = 100.0; // 图片大小

    final int imgCount = imgPaths == null ? 0 : imgPaths!.length; // 图片个数
    if(imgCount > 4) {
      imgSize = 100;
    } else if(imgCount <= 4 && imgCount > 1) {
      imgSize = 150;
    } else {
      imgSize = 220;
    }

    // 头像组件
    Widget avatarWidget = ClipRRect(
      borderRadius: BorderRadius.circular(6.0),
      child: loadImageByUrl(avatarUrl, avatarSize, avatarSize),
    );

    // 图片列表
    Widget imgListWidget = Wrap(
      spacing: imgSpacing,
      runSpacing: imgSpacing,
      children: imgPaths!.take(9).map((path) {
        return Stack(
          children: [
            ImagePreview(imageUrl: path, width: imgSize, height: imgSize),
            if (imgPaths!.indexOf(path) == 8 && imgCount > 9)
              Positioned.fill(
                child: Container(
                  color: Colors.black.withOpacity(0.5),
                  alignment: Alignment.center,
                  child: Text(
                    '+${imgCount - 9}',
                    style: const TextStyle(color: Colors.white, fontSize: 20),
                  ),
                ),
              ),
          ],
        );
      }).toList(),
    );

    return Row(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        avatarWidget,
        const SizedBox(width: 10),
        Expanded(
          flex: 1,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(userName, style: const TextStyle(fontSize: 16.0, fontWeight: FontWeight.w500)),
              const SizedBox(height: 6),
              Text(messageTxt,
                maxLines: 5,
                overflow: TextOverflow.ellipsis,
              ),
              const SizedBox(height: 6),
              Visibility(
                visible: imgCount > 0,
                child: imgListWidget
              ),
              Visibility(
                  visible: city != null && city != '',
                  child: Column(
                    children: [
                      const SizedBox(height: 6),
                      Text(city!, style: const TextStyle(color: Colors.grey, fontSize: 12),),
                    ],
                  )
              ),
              const SizedBox(height: 2),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Text(time, style: const TextStyle(color: Colors.grey, fontSize: 12),),
                  const Icon(Icons.more, color: Colors.grey)
                ],
              )
            ]
          ),
        )
      ],
    );
  }
}
